import React, {Component} from 'react';
import {connect} from 'react-redux';
import {withRouter, Link} from 'react-router-dom';
import generatingGoodsAction from '../../store/actions/generatingGoods';
import goodsLibraryAction from '../../store/actions/goodsLibrary';

import {Table, Pagination, Button, Popconfirm, Input, Tag, message} from 'antd';
import {delGoodData, onOrOffShelves} from '../../api';
import './GoodsList.scss';
import Searchs from './Searchs';

class GoodsList extends Component {
  state = {
    invcode_stock: '',
    current: 1,
    columns: [
      {
        title: '物料编码',
        dataIndex: 'invcode_stock',
        key: 'invcode_stock'
      },
      {
        title: '创建时间',
        dataIndex: 'create_at',
        key: 'create_at'
      },
      {
        title: '名称',
        dataIndex: 'name',
        render: (name, data) => {
          return (
            <div>
              <span style={{paddingRight: 12}}>{name}</span>
              {data.is_promotions ? <Tag color="gold">特惠</Tag> : null}
              {data.is_recommend ? <Tag color="blue">推荐</Tag> : null}
              {data.is_top ? <Tag color="cyan">置顶</Tag> : null}
            </div>
          );
        }
      },
      {
        title: '规格',
        dataIndex: 'status',
        key: 'status'
      },
      {
        title: '供应商',
        dataIndex: 'vendor_name',
        key: 'vendor_name'
      },
      {
        title: '采购未税价(￥)',
        dataIndex: 'purchase_price',
        key: 'purchase_price'
      }, {
        title: '出售价格(￥)',
        dataIndex: 'selling',
        key: 'selling'
      },
      {
        title: '可用量',
        dataIndex: 'availqty',
        key: 'availqty'
      },
      {
        title: '库存量',
        dataIndex: 'qty',
        key: 'qty'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text, dataIndex) => {
          console.log(text, dataIndex);
          return (<div className='GoodsOperation'>
            {
              dataIndex.is_line === 0 ?
                <Button onClick={() => this.upperRacks(text, dataIndex)} type="primary" size='small'>上架</Button>
                :
                <Button onClick={() => this.lowerRacks(text, dataIndex)} size='small'>下架</Button>

            }

            <Link to={{
              pathname: `/generatingGoods/${JSON.stringify({
                id: `${dataIndex.stock_id}`,
                invcode: `${dataIndex.invcode_stock}`,
                cate_code: `${dataIndex.cate_code}`
              })}`
            }} target='_blank'>
              <Button type="dashed" size={'small'}>
                修 改
              </Button>
            </Link>

            <Popconfirm
              title="确定要删除吗？"
              okText="确认"
              cancelText="取消"
              onConfirm={() => this.confirm(text, dataIndex)}
              onCancel={this.cancel}>
              <Button type="danger" size="small">
                删除
              </Button>
            </Popconfirm>
          </div>);
        }
      }
    ]
  };

  // 上架
  upperRacks = (text, data) => {
    console.log(data);
    if (data.availqty > 0) {
      const pagesParams = {
        invcode_stock: this.state.invcode_stock,
        page_size: 10,
        page: this.props.current
      };
      const {id} = data;  // 获取当前的 id
      let params = {
        is_line: '0'
      };
      onOrOffShelves(id, params)
        .then(res => {
          this.props.SEACH_GOODS_DATA(pagesParams);
        })
        .catch(err => {
          console.log(err);
        });
    } else {
      message.error('无可用量......');
    }

  };

  // 下架
  lowerRacks = (text, data) => {
    const pagesParams = {
      invcode_stock: this.state.invcode_stock,
      page_size: 10,
      page: this.props.current
    };
    const {id} = data;  // 获取当前的 id
    let params = {
      is_line: '1'
    };
    onOrOffShelves(id, params)
      .then(res => {
        console.log(res);
        this.props.SEACH_GOODS_DATA(pagesParams);
      })
      .catch(err => {
        console.log(err);
      });
  };

  jump = (id, invcode, cate_code) => {
    this.props.history.push({
      pathname: '/generatingGoods',
      state: {
        id,
        invcode,
        cate_code
      }
    });
  };

  // 删除确认
  confirm = (text, data) => {
    const params = {
      invcode_stock: this.state.invcode_stock,
      page_size: 10,
      page: this.props.current
    };
    delGoodData(data.stock_id).then(res => {
      this.props.SEACH_GOODS_DATA(params);
    });
  };

  cancel = () => {
    console.log('取消');
  };

  // 筛选
  filterChange = (pagination, filters, sorter) => {
    console.log(filters);
  };

  // 分页改变
  pageChange = async page => {
    await this.setState({
      current: page
    });
    // 分页接口对接
    const params = {
      invcode_stock: this.state.invcode_stock,
      min_create_at: '',
      max_create_at: '',
      name: '',
      cate_code: '',
      page_size: 10,
      attcmp: '',
      page
    };
    this.props.SEACH_GOODS_DATA(params);
  };

  pageInit = () => {
    this.setState({
      current: 1
    });
  };

  seachGoods = async invcode_stock => {

    await this.setState({
      current: 1,
      invcode_stock
    });
    const params = {
      invcode_stock: this.state.invcode_stock,
      min_create_at: '',
      max_create_at: '',
      name: '',
      cate_code: '',
      page_size: 10,
      attcmp: '',
      page: this.state.current
    };
    await this.props.SEACH_GOODS_DATA(params);
  };

  componentDidMount() {
    console.log(this.props);
    const {GET_GOODSLIBRARY_INFO} = this.props;
    GET_GOODSLIBRARY_INFO();
  }

  render() {
    const {columns} = this.state;
    const {goodsListData, pageCount} = this.props;
    const list = goodsListData && goodsListData.map(item => {
      return {
        ...item,
        key: item.stock_id
      };
    });
    console.log(list);
    return (
      <div className="GoodsList">
        <Searchs page={this.state.current} pageInit={this.pageInit} seachGoods={this.seachGoods}/>
        <Table columns={columns} dataSource={list} onChange={this.filterChange} pagination={false}/>
        <Pagination
          current={this.state.current}
          onChange={this.pageChange}
          total={pageCount ? +pageCount : 1}
          style={{textAlign: 'center', marginTop: '20px'}}
          hideOnSinglePage
        />
      </div>
    );
  }
}

const mapStateToProps = state => state.goodsLibrary;
export default connect(mapStateToProps, {...generatingGoodsAction, ...goodsLibraryAction})(withRouter(GoodsList));
